<@ui.html>
    <#if !RequestParameters.hideWidget>
    <ul class="nav nav-tabs">
        <li <#if !RequestParameters.instance>class="active"</#if> role="presentation"><a href="<@spring.url relativeUrl='/sp/widgets'/>?layoutId=${RequestParameters.layoutId}">组件</a></li>
        <li role="presentation" <#if RequestParameters.instance>class="active"</#if>><a
                href="<@spring.url relativeUrl='/sp/widgets'/>?instance=true&layoutId=${RequestParameters.layoutId}">暂存实例</a>
        </li>
    </ul>
    </#if>
<div class="container-fluid" style="margin-top: 20px">
    <#if RequestParameters.instance>
    <#-- @ftlvariable name="configs" type="java.util.Map<java.lang.String,com.fable.sp.core.widget.ConfigurableWidget>" -->
    <#-- @ftlvariable name="unusedContents" type="java.util.List<com.fable.sp.core.domain.LayoutItemContent>" -->
    <#-- @ftlvariable name="widgetInstance" type="com.fable.sp.core.domain.WidgetInstance" -->
        <div class="row">
            <div class="col-xs-12">
                <div class="container-fluid">
                    <#list unusedContents as content>
                        <#if content.contentType=="WIDGET">
                            <#assign widgetInstance = content.instance/>
                            <#assign widget = configs[widgetInstance.widgetName]/>
                            <div class="media widget-info" data-instance-id="${widgetInstance.id}">
                                <div class="media-left media-middle">
                                    <a href="#">
                                        <img style="width: 120px;height: 60px" class="media-object"
                                             src="${widget.cover}">
                                    </a>
                                </div>
                                <div class="media-body">
                                    <button type="button"
                                            class="btn btn-sm btn-default pull-right add-widgetInstance-btn">
                                        添加实例
                                    </button>
                                    <h5 class="media-heading">${widget.title}&nbsp;&nbsp;&nbsp;<span class="text-muted">[${widgetInstance.displayName}]</span></h5>
                                ${widget.info}
                                </div>
                            </div>
                            <hr/>
                        </#if>
                    <#else >
                        <div class="text-center">
                            <h4 style="margin-top: 170px">没有暂存实例</h4>
                        </div>
                    </#list>
                </div>
            </div>
        </div>
        <script>
            $(function () {
                $(".add-widgetInstance-btn").click(function () {
                    parent.window.onInstanceAdd($(this).closest(".widget-info").attr("data-instance-id"));
                });
            })
        </script>
    <#else >
    <#-- @ftlvariable name="widgets" type="java.util.List<com.fable.sp.core.widget.ConfigurableWidget>" -->
    <#-- @ftlvariable name="tagCountMap" type="java.util.Map<java.lang.String,java.lang.Integer>" -->
        <div class="row">
            <div class="col-xs-4">
                <div class="container-fluid">
                    <div class="row">
                        <form action="${@()}" method="get">
                            <div class="input-group"><input placeholder="输入关键字搜索" name="name" class="form-control"
                                                            value="${RequestParameters.name}">
                                <span class="input-group-btn"> <button type="submit" class="btn btn-default">搜索
                                </button> </span>
                            </div>
                        </form>
                    </div>
                    <hr/>
                    <h6>分类</h6>
                    <div class="row">
                        <div class="list-group">
                            <a class="list-group-item ${(!RequestParameters.tag?has_content)?string("active","")}"
                               href="${@("tag","")}">
                                <span class="badge">${total}</span>
                                全部
                            </a>
                            <#list tagCountMap?keys as key>
                                <a class="list-group-item ${(RequestParameters.tag==key)?string("active","")}"
                                   href="${@('tag',key)}">
                                    <span class="badge">${tagCountMap[key]}</span>
                                ${key}
                                </a>
                            </#list>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-8">
                <div class="container-fluid">
                    <#list widgets as widget>
                        <div class="media widget-info" data-widget-name="${widget.getName()}">
                            <div class="media-left media-middle">
                                <a href="#">
                                    <img style="width: 120px;height: 60px" class="media-object"
                                         src="${widget.cover}">
                                </a>
                            </div>
                            <div class="media-body">
                                <button type="button"
                                        class="btn btn-sm btn-default pull-right add-widgetInstance-btn">
                                    添加组件
                                </button>
                                <h5 class="media-heading">${widget.title}</h5>
                            ${widget.info}
                            </div>
                        </div>
                        <hr/>
                    </#list>
                </div>
            </div>
        </div>
        <script>
            $(function () {
                $(".add-widgetInstance-btn").click(function () {
                    parent.window.onWidgetAdd($(this).closest(".widget-info").attr("data-widget-name"));
                });
            })
        </script>
    </#if>
</div>
</@ui.html>